<template>
    <el-dialog class="goods_dialog" width="1000px" title="添加商品" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <div>
        <el-form :inline="true" :model="searchForm">
          <el-form-item>
            <el-input v-model="searchForm.goods_name" placeholder="请输入商品ID或名称" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.cate_id" clearable placeholder="请选择商品品类">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchForm.shop_name" placeholder="请输入供应商" clearable />
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.isNew" clearable placeholder="请选择成新度">
              <el-option v-for="item in isNewList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="商品信息" width="350">
            <template slot-scope="scope">
              <div class="flex">
                <el-image style="width: 60px; height: 60px" :src="scope.row.imgurl ? $globalObj.imgBaseUrl + scope.row.imgurl : ''">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <div class="flex-1 text-left" style="padding-left:15px;">
                  <p class="color-999">{{ scope.row.goods_id }}</p>
                  <p class="color-666">{{ scope.row.title }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pact_type" label="租赁方式" align="center" />
          <el-table-column prop="cate_name" label="品类" align="center" />
          <el-table-column prop="shopname" label="供应商" align="center" />
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_choose == 2" type="primary" size="mini" @click="add(scope.row.goods_id)">参与活动</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="text-right" style="margin-top:15px;">
          <el-pagination :current-page.sync="searchForm.page" :page-size="pageSize" layout="total, prev, pager, next" :total="total" prev-text="上一页" next-text="下一页" background @current-change="handleCurrentChange" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import { getCategoryList } from '@/api/recommend'
  import { addList, chooseGoods } from '@/api/xcx'
  export default {
    // props: ['cateId'],
    props: {
      cateId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dialogVisible: false,
        searchForm: {
          page: 1,
          goods_name: '',
          cate_id: '',
          shop_name: '',
          isNew:''
        },
        categoryList: [],
        total: 0,
        tableData: [],
        pageSize: 5,
        isNewList:[{
          id:1,
          name:'全新'
        },
        {
          id:2,
          name:'二手'
        },
      ]
      }
    },
    watch: {
      dialogVisible(val) {
        if (val) {
          this.getSelectList()
          this.$nextTick(() => {
            this.getList()
          })
        } else {
          // 重置
          this.searchForm = {
            page: 1,
            goods_name: '',
            cate_id: '',
            shop_name: ''
          }
        }
      }
    },
    methods: {
      add(id) {
        addList({
          goodsId: id,
          listCateId: this.cateId
        }).then(res => {
          this.getList()
          this.$emit('getList')
        })
      },
      getList() {
        chooseGoods({ pageSize: this.pageSize, list_cate_id: this.cateId, ...this.searchForm }).then(res => {
          this.tableData = res.data
          this.total = res.total
        })
      },
      // 页码切换
      handleCurrentChange(val) {
        this.searchForm.page = val
        this.getList()
      },
      search() {
        this.searchForm.page = 1
        this.getList()
      },
      reset() {
        this.searchForm = {
          page: 1,
          goods_name: '',
          cate_id: '',
          shop_name: ''
        }
        this.getList()
      },
      getSelectList() {
        getCategoryList().then(res => {
          this.categoryList = res || []
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-form .el-input,
  .el-select {
    width: 180px;
  }
  </style>
  